<template>
  <view>
    <uni-nav-bar :title="name" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
    <!-- 团队头部说明 -->
    <view class="teams">
      <view class="detailTop">
        <view class="detail_left" style="width:70%">
          <text class="detail_title">{{ teamInfo.name }}</text>
          <view class="images" @click="Invite('1', '/pages/team/teamList?id=' + GroupID)">
            <view class="image_list">
              <image v-for="(item, index) in teamInfo.driver_avatar" :key="index" :src="item.avatar" mode=""></image>
              <text>{{teamInfo.driver_count}}人</text>
            </view>
            <uni-icons type="forward" size="15" style="margin-left:20rpx"></uni-icons>
          </view>
          <view class="detail_huanb" @click="protection()">
            <text>环保分：</text>
            <text>{{teamInfo.score?teamInfo.score:'0'}}</text>
            <uni-icons type="forward" size="15" style="margin-left:20rpx"></uni-icons>
          </view>
          <view style="margin-top:10rpx;" v-if="teamInfo.address">{{teamInfo.address}}</view>
        </view>
        <view class="detail_right" @click="openPhonePad()" v-if="AssistantsAll.name">
          <image :src="AssistantsAll.image" mode=""></image>
          <text>团助理{{AssistantsAll.name}}</text>
        </view>
      </view>
  <!--    <view class="space-between package title" @click="navTo('team/teamPackage?id='+GroupID+'&name='+teamInfo.name)" v-if="!teamInfo.qun_image">
        <view class="center">
          <image :src="Teammap3" mode="">
          </image>
          <text>本团有{{teamInfo.bao_nums}}个团惠包</text>
        </view>
        <uni-icons type="forward" size="18" color="#666"></uni-icons>
      </view> -->
  <!--    <view class="space-between package title"
        style="background-color: #FFAF70;margin-bottom:0px;width:90%;padding:8rpx 20rpx;border-radius:5px 5px 0px 0px"
        @click="navTo('team/teamPackage?id=' + GroupID + '&name=' + teamInfo.name)" v-if="teamInfo.qun_image">
        <view class="center">
          <image :src="Teammap3" mode=""></image>
          <text style="color:#fff;">本团有{{ teamInfo.bao_nums }}个团惠包</text>
        </view>
        <uni-icons type="forward" size="18" color="#fff"></uni-icons>
      </view> -->
      <view class="space-between package" style="margin-top:0px;" @click="teamOpen()" v-if="teamInfo.qun_image">
        <view class="direction-start">
          <text style="font-size: 30rpx;font-weight: bold;">加入车友群 享受安蓝服务</text>
          <text style="font-size: 24rpx;color: #666666;margin-top:10rpx;">点击右方二维码加入车友群>></text>
        </view>
        <image :src="teamInfo.qun_image" mode="" style="width: 83rpx;height: 83rpx;"></image>
      </view>
      <!-- 区域价格 -->
      <view class="package" style="padding: 15rpx 0px 5rpx;">
        <view class="textPrice">
          <view class="region">
            <text>价格区域</text>
            <view class="center">
              <text @click.stop="positionList.length > 0?priceArea():''" class="locName">{{ positionText.name }}</text>
              <image src="../../static/team/down.png" mode="" v-if="positionList.length > 0" @click.stop="priceArea()">
              </image>
            </view>
          </view>
          <view v-if="positionList.length > 0 && show" class="ul_item"
            :style="{ transform: show ? 'translateY(-60px)' : 'translateY(-20px)', zIndex: show ? '1' : '-1' }">
            <view class="li_item" v-for="(item, index) in positionList" :key="index" @click="changeLoct(item)">
              {{ item.name }}
            </view>
          </view>
        </view>
        <!-- 级别列表 -->
        <GradeList :teamInfo="teamInfo"></GradeList>
      </view>
    </view>
    <view class="invitation" @click="Invite('1', '/pages/team/invitation?id=' + GroupID+'&type='+'team')">邀请好友
    </view>
    <view class="Withdrawa"><text @click="openTeam">退团</text></view>
    <view style="width: 100%;height: 40rpx;"></view>
    <Lotlats @position="position"></Lotlats>
    <!-- <dragImg @btnClick="navTo('groupBenefits/groupEditor')" :img_sub="AddTeam4" v-if="Useridentity=='1'"></dragImg> -->
    <!-- 团助理弹框 -->
    <uni-popup ref="popup" type="center">
      <Assistant :AssistantsAll="AssistantsAll"></Assistant>
    </uni-popup>
    <!-- 退团弹框 -->
    <uni-popup ref="team" type="center" :is-mask-click="false">
      <Public :title="title" :text="text" @close="close" @submit="submit"></Public>
    </uni-popup>
  </view>
  <!-- 入团二维码 -->
  <TeamPop ref="teamBullet" :title="teamInfo.qun_name" :image="teamInfo.qun_image"></TeamPop>
</template>

<script setup lang="ts">
  import { Ref, ref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import TeamPop from '@c/team/teamPop.vue';
  import dragImg from '@c/drag-button/drag-img.vue';
  import { navBack, navTo } from '@/utils/navigator';
  import GradeList from '@c/team/Grade.vue';
  import Lotlats from '@c/team/Lotlat.vue';
  import Assistant from '@c/team/assistant.vue';
  import Public from '@c/pobulic/public.vue';
  import { AddTeam4, Teammap3 } from '@/utils/Static';
  import { toPublish } from '@mqtt';
  import { showLoading, showToast, successToast } from '@/utils/prompt';
  import { GetCities, GetCitieList, getdriver, teamAssistant } from '@/gql/team';
  import { getDriverID } from '@/stores/driverID';
  const driver_id = getDriverID();
  const Useridentity = uni.getStorageSync('Useridentity');
  const repeat = ref(true); //放重复点击
  const name = ref('');
  const GroupID = ref('');
  const teamInfo : Ref<any> = ref({});
  const positionText : Ref<any> = ref({});
  const AssistantsAll : Ref<any> = ref({});
  const positionList = ref([]);
  const show = ref(false);
  const popup = ref(null);
  const team = ref(null);
  const teamBullet = ref(null)
  const title = '退团';
  const text = '大佬，退团后将不能享受该团专享价，系统自动通知团长。';
  onLoad((pearm) => {
    name.value = pearm.name;
    GroupID.value = pearm.id;
    CityList();
  });

  /**
   * 获取当前城市信息
   * @param {Object} lat 当前位置的纬度
   * @param {Object} lot 当前位置的经度
   */
  function position(lat, lot) {
    showLoading('正在加载');
    const payload = {
      query: GetCities,
      variables: {
        lon: lot,
        lat: lat,
      },
    };
    toPublish('ql/team/getCity', payload, (obj : any) => {
      uni.hideLoading();
      const { data } = obj;
      positionText.value = data.get_city;
      getdrivers(positionText.value.code);
    });
  }
  /**
   * 获取加注机分布的城市列表
   */
  function CityList() {
    const payload = {
      query: GetCitieList,
    };
    toPublish('ql/team/getCityList', payload, (obj : any) => {
      uni.hideLoading();
      const { data } = obj;
      positionList.value = data.get_city_list;
    });
  }
  /**
   * @param {Object} code 城市code
   * 获取团队信息
   */
  function getdrivers(code) {
    const payload = {
      query: getdriver,
      variables: {
        code,
        team_id: Number(GroupID.value),
      },
    };
    toPublish('ql/team/getTeamInfo', payload, (obj : any) => {
      uni.hideLoading();
      const { data } = obj;
      teamInfo.value = data.get_team_info;
      if (teamInfo.value.admin_id != 0) {
        Assistants(teamInfo.value.admin_id);
      }
    });
  }
  /**
   * 获取团助理信息
   */
  function Assistants(admin_id) {
    const payload = {
      query: teamAssistant,
      variables: {
        admin_id,
      },
    };
    toPublish('ql/team/getAdminInfo', payload, (obj : any) => {
      uni.hideLoading();
      const { data } = obj;
      AssistantsAll.value = data.get_admin_info;
    });
  }
  /**
   * @param {Object} item 地址信息 item.code地址编码
   */
  function changeLoct(item) {
    getdrivers(item.code);
    positionText.value = item;
    show.value = false;
  }

  function Invite(num, path) {
    switch (num) {
      case '1':
        uni.navigateTo({
          url: path,
        });
        break;
    }
  }

  function protection() {
    uni.navigateTo({
      url: '/pages/team/protection?id=' + GroupID.value + '&price=' + teamInfo.value.score,
    });
  }
  // 下拉地址列表
  function priceArea() {
    show.value = !show.value;
  }
  // 团助理弹框
  function openPhonePad() {
    popup.value.open();
  }
  // 退团弹框
  function openTeam() {
    team.value.open();
  }

  function close() {
    team.value.close();
  }
  //退团
  function submit() {
    showLoading();
    if (!repeat.value) {
      return;
    }
    repeat.value = false;
    const payload = {
      driver_id,
      team_id: Number(GroupID.value),
    };
    toPublish('team/tuiTeam', payload, (obj : any) => {
      uni.hideLoading();
      const { code, msg } = obj;
      team.value.close();
      if (code === 1) {
        successToast(msg);
        setTimeout(() => {
          uni.redirectTo({
            url: '/pages/index/teamIndex',
          });
        }, 1000);
      } else {
        repeat.value = true;
        showToast(msg);
      }
    });
  }
  function teamOpen() {
    teamBullet.value.open()
  }
</script>

<style scoped lang="less">
  @import url('../team/less/teamDetail.less');
</style>
<style>
  page {
    /* background-color: #fff; */
  }

  body {
    /* background-color: #fff; */
    height: 100vh;
    overflow: auto;
    font-family: 'PingFangSC-Regular', 'PingFang SC';
  }
</style>